<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>事件修饰符</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        .list{
            width:200px;
            height:200px;
            background-color: peru;
            overflow: auto;
        }
        li{
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="root">
        <!-- 阻止默认事件（常用） -->
        <a :href="url" @click.prevent="showInfo">阻止事件1-默认事件</a>

        <!-- 阻止事件冒泡（常用） -->
        <div @click="showInfo">
            <!-- <button @click.stop="showInfo">阻止事件2-事件冒泡</button> -->
            <a :href="url" @click.prevent.stop="showInfo">阻止事件2-附加 阻止默认事件和冒泡两种行为</a>
        </div>

        <!-- 事件只触发一次（常用） -->
        <button @click.once="showInfo">阻止事件3-事件只触发一次</button>

        <!-- capture：只有eventtarget是当前操作的元素时才触发事件 -->
        <!-- 添加捕获事件后按照1 2顺序输出 -->
        <div @click.capture="showMsg(1)">
            div1
            <!-- 点击div2 按照：2 1顺序输出 -->
            <div @click="showMsg(2)">
                div2
            </div>
        </div>

        <!--  只有even.tartget是当前操作的元素时才触发事件） -->
        <div @click.self="showInfo">
            <button @click="showInfo">阻止事件5-</button>
        </div>

        <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕 -->
        <ul @wheel.passive="demo1" class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>


    <script type="text/javascript">
        const vm = new Vue({
            el:"#root",
            data(){
                return{
                    url:"http://www.baidu.com"
                }
            },
            methods:{
                showInfo(e){
                    console.log(e)
                    alert("即将前往百度。。。")
                },
                showMsg(msg){
                    console.log(msg)
                },
                demo1(){
                    // console.log("@")
                    for(let i=0; i<1000000; i++){
                        console.log("#")
                    }
                    console.log("累坏了")
                }
            }
        })
    </script>
</body>
</html>